<template>
	<view class="page">
		<!-- 拍品卡片列表 -->
		<view v-if="$common.hasLogin & hasData" class="card-wrapper">
			<ap-card v-for="item in myLots" :key="item.lotId" :cardValue="item" class="card" @tapCard="click(item.lotId)"></ap-card>
			<cl-loadmore v-if="myLots.length >= 2" background-color="#fff" :loading="loading" :finish="finish">没有更多了</cl-loadmore>
		</view>
		<view v-else class="tip-wrapper">
			<text>{{errormsg}}</text>
		</view>
	</view>
</template>

<script>
	// 拍品卡片
	import apCard from "@/components/ap-card/ap-card.vue";
	export default {
		components: {
			apCard
		},
		data() {
			return {
				hasData: false,
				loading: false,
				finish: false,
				errormsg: "",
				errormsgList: ["你还没有登录，请先登录", "你还没有发布过拍卖或拍得拍品哦"],
				myLots: [],
				lastCardId: 0,
			}
		},
		methods: {
			click(lotId) {
				uni.navigateTo({
					url: "../../lotDetail/lotDetail?lotId=" + lotId
				})
			},
			loadContent() {
				// 进入页面加载初数据
				this.requestUrl(this.$serverUrl + "myLots?uid=" + this.$common.user.uid + "&pageSize=8");
			},
			// 加载更多
			loadMore() {
				this.goLoading()
				setTimeout(() => {
					this.requestUrl(this.$serverUrl + "myLots?lastLotId=" + this.lastCardId + "&uid=" + this.$common.user.uid + "&pageSize=8");
				}, 500)
			},
			// 请求网络（特殊），获取对应tab下的内容
			requestUrl(url) {
				uni.request({
					url: url,
					method: "GET",
					success: (res) => {
						if (this.checkSucess(res)) {
							// 没有内容更改状态
							if (res.data.data.length == 0) {
								this.goNoMore()
								if (this.myLots.length <= 0) {
									this.errormsg = this.errormsgList[1];
								}
								uni.stopPullDownRefresh();
								return;
							}
							this.handleLotImages(res);
							this.handlePhoto(res);
							// 将数据加载到对应位置，并记录最后一条的lotId
							this.myLots = this.myLots.concat(res.data.data);
							this.lastCardId = this.myLots[this.myLots.length - 1].lotId;
							this.hasData = true;
							uni.stopPullDownRefresh();
							this.goStart()
						} else {

						}
					}
				})
			},
			// 网络请求是否成功的判断
			checkSucess(res) {
				let isSuccess = false;
				if (res.data.statusCode == "200") {
					if (res.data.msg == "success") {
						isSuccess = true;
					}
				}
				return isSuccess;
			},
			// 处理头像
			handlePhoto(res) {
				let data = res.data.data;
				for (let i = 0; i < data.length; i++) {
					let photo = data[i].photo;
					if (photo == null || photo == "") {
						res.data.data[i].photo = "/static/icon/head-icon.jpg";
						continue;
					}
					res.data.data[i].photo = "http://localhost:8081/photo/" + photo;
				}
			},
			handleLotImages(res) {
				// 处理图片地址
				for (let j = 0; j < res.data.data.length; j++) {
					if (res.data.data[j].images != null) {
						let image = res.data.data[j].images.split("?");
						for (let i = 0; i < image.length; i++) {
							image[i] = "http://localhost:8081/image/" + res.data.data[j].lotId + "/" + image[i];
						}
						res.data.data[j].images = image;
					}
				}
			},
			goStart() {
				this.loading = false;
				this.finish = false;
			},
			goLoading() {
				this.loading = true;
			},
			goNoMore() {
				this.finish = true;
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				this.myLots = [];
				this.requestUrl(this.$serverUrl + "myLots?uid=" + this.$common.user.uid + "&pageSize=8");
			}, 500)
		},
		// 触底事件
		onReachBottom() {
			if (!this.hasData) {
				return;
			}
			if (this.myLots.length < 2) {
				return;
			}
			this.goStart();
			this.loadMore();
		},
		onLoad() {
			if (!this.$common.hasLogin) {
				this.errormsg = this.errormsgList[0];
				return;
			}
			this.loadContent();
		}
	}
</script>

<style lang="scss">
	/* 拍品卡片 */
	.card-wrapper {
		margin-top: 20rpx;
		padding: 20rpx 20upx 20upx;
		background-color: #F2F1F6;
	}

	.card {
		margin-bottom: 30rpx;
		background-color: #FFFFFF;
	}

	.tip-wrapper {
		height: 100%;
		background-color: #F2F1F6;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tip-wrapper text {
		margin-bottom: 140rpx;
		color: #BCBCBC;
		font-size: 16px;
	}

	/deep/ .cl-divider__text {
		background-color: #F2F1F6 !important;
	}
</style>
